<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import {
    Plus,Minus
} from '@element-plus/icons-vue'

const obj = ref({
    lateMoney: [],
    leaveEarlyMoney: [],
    absenceMoney: [],
    perfectAttendance: null
});

const submitData = () => {
    axios({
        method: "POST",
        url: "/api/attendance/updateRule",
        data: {
            rule: JSON.stringify(obj.value)
        }
    }).then((resp) => {
        if (resp.data.code === 200) {
            getList();
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    });

};


let getList = () => {
    axios({
        method: "GET",
        url: `/api/attendance/getRule`
    }).then((resp) => {
        if (resp.data.code === 200) {
            obj.value = JSON.parse(resp.data.data.rule);
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    })
};

onMounted(() => {
    getList();
});
</script>

<template>
    <el-form>
        <el-form-item label="迟到扣款金额">
            <div v-for="item in obj.lateMoney">
                <el-input v-model="item.money"></el-input>
            </div>
            <el-button type="primary" :icon="Plus" circle  @click="obj.lateMoney.push({})"/>
            <el-button type="primary" :icon="Minus" circle  @click="obj.lateMoney.pop({})"/>
        </el-form-item>

        <el-form-item label="早退扣款金额">
            <div v-for="item in obj.leaveEarlyMoney">
                <el-input v-model="item.money"></el-input>
            </div>
            <el-button type="primary" :icon="Plus" circle  @click="obj.leaveEarlyMoney.push({})"/>
            <el-button type="primary" :icon="Minus" circle  @click="obj.leaveEarlyMoney.pop({})"/>
        </el-form-item>

        <el-form-item label="旷工扣除工资天数">
            <div v-for="item in obj.absenceMoney">
                <el-input v-model="item.money"></el-input>
            </div>
            <el-button type="primary" :icon="Plus" circle  @click="obj.absenceMoney.push({})"/>
            <el-button type="primary" :icon="Minus" circle  @click="obj.absenceMoney.pop({})"/>
        </el-form-item>

        <el-form-item label="全勤奖">
            <el-input v-model="obj.perfectAttendance"></el-input>
        </el-form-item>
    </el-form>

    <el-button class="updateButton"  type="warning" round @click="submitData">提交修改</el-button>

    <!-- <div class="Div">

        <div>
            <h4>迟到扣款金额:</h4>
            <div v-for="item in obj.lateMoney">
                <el-input v-model="item.money"></el-input>
            </div>
            <el-button type="primary" :icon="Plus" circle  @click="obj.lateMoney.push({})"/>
            <el-button type="primary" :icon="Minus" circle  @click="obj.lateMoney.pop({})"/>
        </div>

        <div>
            <h4>早退扣款金额:</h4>
            <div v-for="item in obj.leaveEarlyMoney">
                <el-input v-model="item.money"></el-input>
            </div>
            <el-button type="primary" :icon="Plus" circle  @click="obj.leaveEarlyMoney.push({})"/>
            <el-button type="primary" :icon="Minus" circle  @click="obj.leaveEarlyMoney.pop({})"/>
        </div>

        <div>
            <h4>旷工扣除工资天数:</h4>
            <div v-for="item in obj.absenceMoney">
                <el-input v-model="item.money"></el-input>
            </div>
            <el-button type="primary" :icon="Plus" circle  @click="obj.absenceMoney.push({})"/>
            <el-button type="primary" :icon="Minus" circle  @click="obj.absenceMoney.pop({})"/>
        </div>

        <div>
            <h4>全勤奖:</h4>
            <el-input v-model="obj.perfectAttendance"></el-input>
        </div>

        

    </div> -->
</template>

<style scoped>
/* .Div>div{
    display: flex;
    flex-direction: row;
    margin: 5px 0;
} */
.el-input{
    width: 70px;
    margin: auto 5px;
}

/* .h4{
    margin: 0 5px;
} */

.el-button{
    margin: 0 5px;
}
</style>